{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}尚硅谷书店-我的订单{% endblock %}
{% block topfiles %}
{% endblock %}
{% block body %}

    <h3 class="common_title">确认收货地址</h3>

    <div class="common_list_con clearfix">
        <dl>
            <dt>寄送到：</dt>
            <dd><input type="radio" name="addr_id" value="{{ addr.id }}" checked="">{{ addr.recipient_addr }}
                （{{ addr.recipient_name }} 收） {{ addr.recipient_phone }}</dd>
        </dl>
        <a href="{% url 'user:address' %}" class="edit_site">编辑收货地址</a>

    </div>

    <h3 class="common_title">支付方式</h3>
    <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
            <input type="radio" name="pay_style" value="1" checked>
            <label class="cash">货到付款</label>
            <input type="radio" name="pay_style" value="2">
            <label class="weixin">微信支付</label>
            <input type="radio" name="pay_style" value="3">
            <label class="zhifubao"></label>
            <input type="radio" name="pay_style" value="4">
            <label class="bank">银行卡支付</label>
        </div>
    </div>

    <h3 class="common_title">商品列表</h3>
    <div class="common_list_con clearfix">
        <ul class="book_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
        </ul>
        {% for book in books_li %}
            <ul class="book_list_td clearfix">
                <li class="col01">{{ forloop.counter }}</li>
                <li class="col02"><img src="{% static book.books %} "></li>
                <li class="col03">{{ book.name }}</li>
                <li class="col04">{{ book.unit }}</li>
                <li class="col05">{{ book.price }}元</li>
                <li class="col06">{{ book.count }}</li>
                <li class="col07">{{ book.amount }}元</li>
            </ul>
        {% endfor %}
    </div>

    <h3 class="common_title">总金额结算</h3>

    <div class="common_list_con clearfix">
        <div class="settle_con">
            <div class="total_book_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_price }}元</b></div>
            <div class="transit">运费：<b>{{ transit_price }}元</b></div>
            <div class="total_pay">实付款：<b>{{ total_pay }}元</b></div>
        </div>
    </div>

    <div class="order_submit clearfix">
        <a href="javascript:;" id="order_btn" books_ids="{{ books_ids }}">提交订单</a>
        {% csrf_token %}
    </div>
{% endblock body %}
{% block bottom %}
    <div class="popup_con">
        <div class="popup">
            <p>订单提交成功！</p>
        </div>
        <div class="mask"></div>
    </div>
{% endblock bottom %}
{% block bottomfiles %}
    <script type="text/javascript">
        $('#order_btn').click(function () {
            // 获取收货地址的id, 支付方式，用户购买的商品id
            var addr_id = $('input[name="addr_id"]').val();
            var pay_method = $('input[name="pay_style"]:checked').val();
            var books_ids = $(this).attr('books_ids');
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();
            // alert(addr_id+':'+pay_method+':'+books_ids)
            // 发起post请求， 访问/order/commit/
            var params = {
                'addr_id': addr_id,
                'pay_method': pay_method,
                'books_ids': books_ids,
                'csrfmiddlewaretoken': csrf
            };
            $.post('/order/commit/', params, function (data) {
                // 根据json进行处理
                if (data.res === 6) {
                    $('.popup_con').fadeIn('fast', function () {
                        setTimeout(function () {
                            $('.popup_con').fadeOut('fast', function () {
                                window.location.href = '/user/order/';
                            });
                        }, 3000)

                      });
                } else {
                    alert(data.errmsg)
                }
            })

        });
        </script>
{#    <script type="text/javascript">#}
{#        $("#order_btn").click(function () {#}
{#            var addr_id = $('input[name="addr_id"]').val();#}
{#            var pay_method = $('input[name="pay_style"]:checked').val();#}
{#            var books_ids = $(this).attr('books_ids');#}
            {#var token = $('input[name=csrfmiddlewaretoken]').val();#}
{#            $.ajax({#}
{#                url:"/order/commit/",#}
                {#contentType:"application/json",#}
{#                type:"post",#}
{#                datatype:"json",#}
{#                data: {"csrfmiddlewaretoken":'{{ csrf_token }}',"addr_id":addr_id,"pay_method":pay_method,"books_ids":books_ids},#}
{#                success:function (result) {#}
{#                    if (result){#}
{#                    alert('11111111111');#}
{#                    alert('提交成功');#}
{#                    window.location.href="/user/order/";#}
{#                     }#}
{#                },#}
{#                error(result){#}
{#                    alert('2222222222');#}
{#                    alert('错误');#}
{#                }#}
{#            })#}
{#        })#}
{#    </script>#}
{% endblock bottomfiles %}
